<template>
    <div class="pagination">
      <el-pagination
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        :page-sizes="pageSizes"
        :total="total"
        layout="total, sizes, prev, pager, next"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </template>
  
  <script setup>
  
  import { ref, watch } from 'vue'
  defineOptions({
    name: 'Pagination',
})


  const props = defineProps({
    total: {
      type: Number,
      default: 0
    },
    page: {
      type: Number,
      default: 1
    },
    limit: {
      type: Number,
      default: 10
    },
    pageSizes: {
      type: Array,
      default: () => [10, 20, 50, 100]
    }
  })
  
  const emit = defineEmits(['update:page', 'update:limit', 'pagination'])
  
  const currentPage = ref(props.page)
  const pageSize = ref(props.limit)
  
  // 监听父组件传入的page和limit变化
  watch(() => props.page, (val) => {
    currentPage.value = val
  })
  watch(() => props.limit, (val) => {
    pageSize.value = val
  })
  
  // 分页大小改变
  const handleSizeChange = (val) => {
    pageSize.value = val
    emit('update:limit', val)
    emit('pagination', { page: currentPage.value, limit: val })
  }
  
  // 当前页改变
  const handleCurrentChange = (val) => {
    currentPage.value = val
    emit('update:page', val)
    emit('pagination', { page: val, limit: pageSize.value })
  }
  </script>
  
  <style scoped>
  .pagination {
    margin-top: 20px;
    display: flex;
    justify-content: flex-end;
  }
  </style>